<template>
  <el-form ref="platform" :model="params" :rules="rules" :class="{'mobile-el-form': showMobilePage}" label-width="100px">
    <el-col :span="12" class="flex">
      <el-form-item label="下单平台" prop="platformId">
        <el-select v-model="params.platformId" placeholder="请选择下单平台" clearable filterable class="width240" size="small" @change="changePlatform">
          <el-option
            v-for="item in orderPlatformOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            clearable/>
        </el-select>
      </el-form-item>
      <div v-if="!showMobilePage" class="btns">
        <span v-if="isLast" class="add-btn" @click="add">
          添加
        </span>
        <span v-if="index > 0" class="del-btn" @click="del">
          删除
        </span>
      </div>
    </el-col>
    <el-col :span="12" >
      <el-form-item :style="`${showMobilePage?'margin:0':''}`" label="合作形式" prop="cooperationFormId">
        <el-select
          v-model="params.cooperationFormId"
          :no-data-text="params.platformId?'数据为空':'请先选择下单平台'"
          placeholder="请选择合作形式"
          clearable
          multiple
          filterable
          class="width240"
          size="small" >
          <el-option
            v-for="item in orderFormOption"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            clearable/>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col v-if="showMobilePage">
      <el-form-item :style="`${showMobilePage?'margin: 8px 0 16px':''}`" label="">
        <div class="mobile-btns">
          <span v-if="index > 0" class="del-btn" @click="del">
            删除
          </span>
          <span v-if="isLast" :class="{'border-left':index > 0}" class="add-btn" @click="add">
            添加<span class="add-icon">+</span>
          </span>
        </div>
      </el-form-item>
    </el-col>
  </el-form>
</template>
<script>
import { platformList, orderFormList } from '@/api/select';
import { mapState } from 'vuex';

export default {
  model: {
    prop: 'params',
    event: 'changeValue'
  },
  props: {
    params: {
      type: Object,
      default: () => {}
    },
    index: {
      type: Number,
      default: -1
    },
    isLast: {
      type: Boolean,
      default: false
    },
    isCreateNew: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      orderFormOption: [],
      orderPlatformOption: [], // 下单平台
      rules: {
        platformId: [{ required: true, trigger: 'change', message: '请选择下单平台' }],
        cooperationFormId: [{ required: true, trigger: 'change', message: '请选择合作形式' }]
      },
      isInitOrderForm: true
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    selectData: {
      get() {
        return this.params;
      }
    }
  },
  watch: {
    params: {
      handler(newVal, oldVal) {
        this.$emit('changeValue', this.params);
      },
      immediate: true,
      deep: true
    },
    'params.platformId': {
      handler: function() {
        this.params.cooperationFormId = '';
      },
      deep: true
    }
  },
  created() {
    this.platformList();
    if (this.params.platformId) {
      this.getOrderForm({ platformId: this.params.platformId });
    }
  },
  methods: {
    add() {
      this.$emit('add');
    },
    del() {
      this.$emit('del', this.index);
    },
    isValidate(validate = true) {
      return new Promise((resolve, reject) => {
        if (validate) {
          this.$refs.platform.validate(valid => {
            if (valid) {
              resolve(valid);
            } else {
              reject('err');
            }
          });
        } else {
          resolve(true);
        }
      });
    },
    // 获取下单形式
    async getOrderForm(params = {}) {
      try {
        const result = await orderFormList(params.platformId);
        if (result.data && result.data.length) {
          result.data.forEach(i => {
            i.label = i.value;
            i.value = i.id;
          });
        }
        this.orderFormOption = result.data;
        if (this.isInitOrderForm) {
          this.params.cooperationFormId.forEach((ele, index) => {
            // 禁用的合作形式 是否能在 可用的合作形式数组中找到
            const res = result.data.findIndex(item => { return item.id === ele; });
            // 找不到则为已禁用的，复制发起的不需要回填禁用选项，编辑的需要
            if (res === -1) {
              if (this.isCreateNew) {
                this.params.cooperationFormId.splice(index, 1);
              } else {
                const temp = { id: ele, value: ele, label: this.params.cooperationForm[index] };
                this.orderFormOption.push(temp);
              }
            }
          });
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 获取下单平台的列表
    async platformList() {
      try {
        const result = await platformList();
        result.data.forEach((i) => {
          i.label = i.value;
          i.value = i.id;
        });
        this.orderPlatformOption = result.data;
      } catch (error) {
        console.log(error);
      }
    },
    changePlatform(val) {
      this.getOrderForm({ platformId: val });
      this.isInitOrderForm = false;
    }
  }
};
</script>
<style lang="scss" scoped>
  .flex{
    display: flex;
    align-items: center;
  }
  .mobile-el-form {
    ::v-deep .el-form-item {
      width: 100%;
    }
    .mobile-btns {
      display: flex;
      align-items: center;
      span {
        white-space: nowrap;
      }
      .border-left {
        position: relative;
        padding-left:12px;
        margin-left: 12px;
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 50%;
          margin-top: -7px;
          width: 1px;
          background: #ddd;
          height: 14px;
        }
      }
      .add-btn{
        display: flex;
        align-items: center;
        color: #406EFF;
        font-weight: bold;
        .add-icon {
          color: #406EFF;
          font-size: 18px;
          margin:0 0 2px 4px;
        }
      }
      .del-btn{
        color: #FF4E5F;
      }
    }
  }
  .btns{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    margin-bottom: 22px;
    cursor: pointer;
    .add-btn{
      margin-left: 12px;
      color: #406EFF;
    }
    .del-btn{
      margin-left: 12px;
      color: #192452;
    }
  }
  .width240 {
    width: 240px;
    &::v-deep {
      .el-select {
        width: 240px;
      }
      .el-input__inner {
        width: 240px;
      }
      .el-textarea__inner{
        height: 88px;
      }
      .el-tag{
        color: #406EFF;
        background: #EFF3FB;
      }
    }
  }
</style>
